import 'package:flutter/material.dart';
import 'package:flutter_massage/common_lib/extension/ex_widget.dart';
import 'package:flutter_massage/common_lib/index.dart';
import 'package:flutter_massage/common_lib/routers/route.dart';
import 'package:flutter_massage/common_lib/ui/common_component.dart';
import 'package:flutter_massage/pages/model/bean.dart';
import 'package:flutter_massage/pages/technician/technician_detail/technician_detail_page.dart';
import 'package:flutter_massage/pages/technician/technician_logic.dart';
import 'package:flutter_massage/values/colors.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class TechnicianPage extends StatefulWidget {
  const TechnicianPage({super.key});

  @override
  State<TechnicianPage> createState() => _TechnicianPageState();
}

class _TechnicianPageState extends State<TechnicianPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return const _TechnicianComponent();
  }

  @override
  bool get wantKeepAlive => true;
}

class _TechnicianComponent extends GetView<TechnicianLogic> {
  const _TechnicianComponent();

  @override
  Widget build(BuildContext context) {
    return GetBuilder<TechnicianLogic>(
      assignId: true,
      init: TechnicianLogic(),
      builder: (logic) {
        return BaseScaffold(
          titleStr: '技师',
          hideBackBtn: true,
          scaffoldBackgroundColor: AppColors.grayF8,
          child: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return TechnicianItem(logic.lists[index]);
            },
            separatorBuilder: (BuildContext context, int index) => CommonMargin.height(12.w),
            itemCount: logic.lists.length,
            padding: EdgeInsets.all(12.w),
          ),
        );
      },
    );
  }
}

class TechnicianItem extends StatelessWidget {
  const TechnicianItem(this.bean, {super.key});

  final TechnicianBean bean;

  @override
  Widget build(BuildContext context) {
    return ButtonWidget(
      onTap: () => CommonRoute.open(TechnicianDetailPage(bean)),
      hasInkWell: false,
      child: Stack(
        children: [
          FractionallySizedBox(
            widthFactor: 1,
            child: AspectRatio(
              aspectRatio: 1,
              child: ImageWidget.url(bean.header ?? '', fit: BoxFit.cover, radius: 8.w),
            ),
          ),
          Container(
            decoration: CommonDecoration.getShapeDecoration(
              gradient: CommonDecoration.xydGradient,
              radius: 4.w,
            ),
            padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 3.w),
            child: TextWidget.oneLine(text: bean.distance ?? '', fontSize: 12, color: AppColors.white),
          ).positioned(right: 6.w, top: 6.w),
          _buildBottom().positioned(bottom: 0, left: 0, right: 0),
        ],
      ),
    );
  }

  Widget _buildBottom() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: CommonDecoration.getRadius(
        bottomLeft: 8.w,
        bottomRight: 8.w,
        bg: AppColors.black.withOpacity(0.4),
      ),
      height: 75.w,
      child: Column(
        children: [
          Row(
            children: [
              TextWidget.oneLine(
                text: bean.name ?? '',
                fontSize: 16,
                color: AppColors.white,
                fontWeight: FontWeight.bold,
              ).expanded(),
              Text.rich(
                TextSpan(
                  text: '评分：',
                  children: [TextSpan(text: bean.score ?? '', style: const TextStyle(color: AppColors.primaryOrange))],
                  style: const TextStyle(
                    fontSize: 12,
                    color: AppColors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ).expanded(),
              Text.rich(
                TextSpan(
                  text: '已服务人次：',
                  children: [
                    TextSpan(text: '${bean.servedNum ?? 0}', style: const TextStyle(color: AppColors.primaryOrange))
                  ],
                  style: const TextStyle(
                    fontSize: 12,
                    color: AppColors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                textAlign: TextAlign.right,
              ).expanded(),
            ],
          ).paddingTop(11.w),
          Row(
            children: [
              TextWidget.oneLine(
                text: (bean.labels ?? []).join('、'),
                fontSize: 11,
                color: AppColors.white,
                fontWeight: FontWeight.bold,
              ).expanded(),
              ButtonWidget.text(
                '预约TA',
                textColor: AppColors.white,
                fontWeight: FontWeight.bold,
                fontSize: 12,
                alignment: Alignment.center,
                width: 70.w,
                height: 28.w,
                borderRadius: 28.w,
                gradient: CommonDecoration.xydGradient,
              ),
            ],
          ).paddingTop(6.w),
        ],
      ),
    );
  }
}
